{% load i18n %}

<div class="accordion">
  <button class="accordion-btn {% if transcripts_type == 'manual' %}active{% endif %}">
    {% trans "Manual & default transcripts" %}
  </button>
  <div class="accordion-panel {% if transcripts_type == 'manual' %}active{% endif %}" id="accordion-panel-transcripts">
    {% for field in transcripts_fields %}
      <li class="field comp-setting-entry metadata_entry is-set" data-field-name="{{ field.name }}" data-default="{{ field.default|default_if_none:"" }}" data-cast="transcripts">
        <div class='wrapper-comp-setting metadata-video-translations'>
          <label class="label setting-label" for="xb-field-edit-{{ field.name }}">{{ field.display_name }}</label>
          {% if field.type == 'transcripts' %}
            {% include 'studio-edit-transcripts.html' with field=field %}
          {% elif field.type == 'default_transcripts' %}
            {% include 'studio-edit-default-transcripts.html' %}
          {% elif field.type == 'token' %}
            {% include 'studio-edit-token.html' %}
          {% endif %}
        </div>
        {% if field.help %}
          <span class="tip setting-help"> {{ field.help|safe }} </span>
        {% endif %}
      </li>
    {% endfor %}
  </div>

  <button class="accordion-btn {% if transcripts_type == '3PM' %}active{% endif %}">
    {% trans "3PlayMedia transcripts" %}
  </button>
  <div class="accordion-panel {% if transcripts_type == '3PM' %}active{% endif %}" id="accordion-panel-3pm">
    {% for field in three_pm_fields %}
      <li
        class="field comp-setting-entry metadata_entry {% if field.is_set %}is-set{% endif %} {% ifequal field.type 'boolean' %}is-hidden{% endifequal %}"
        data-field-name="{{field.name}}"
        data-default="{% if field.type == 'boolean' %}{{ field.default|yesno:'1,0' }}{% else %}{{ field.default|default_if_none:"" }}{% endif %}"
        data-cast="{{field.type}}"
      >
        <div class='wrapper-comp-setting'>
          <label class="label setting-label" for="xb-field-edit-{{field.name}}">{{field.display_name}}</label>
          {% if field.type == "boolean" %}
            {% include "fields/boolean.html" with field=field %}
          {% elif field.type == "string" or field.type == 'threeplaymedia_apikey' %}
            {% include "fields/string.html" with field=field %}
          {% endif %}
        </div>
        {% if field.help %}
          <span class="tip setting-help"> {{ field.help|safe }} </span>
        {% endif %}
      </li>
    {% endfor %}
    {#% include 'studio-edit-3playmedia-apikey.html' %#}

  </div>
</div>

<script type="text/javascript">
  var accButtons = document.getElementsByClassName('accordion-btn');
  var accPanels = document.getElementsByClassName('accordion-panel');
  var advSettingsContainer = document.getElementsByClassName('settings-list advanced')[0];

  Array.prototype.forEach.call(accButtons, function(accButton) {
    // Set initial tooltips
    setTooltip(accButton);

    accButton.onclick = function(evt) {
      // Toggle all buttons and panels inactive
      Array.prototype.forEach.call(accPanels, function(panel) {
        panel.classList.remove('active');
      });
      Array.prototype.forEach.call(accButtons, function(button) {
        button.classList.remove('active');
      });

      // Toggle clicked button and panel to active
      this.classList.add('active');
      var panel = this.nextElementSibling;
      panel.classList.add('active');

      // Update tooltips
      Array.prototype.forEach.call(accButtons, function(button) {
        setTooltip(button);
      });

      // Toggle 3PM streaming
      if (panel.id === 'accordion-panel-3pm') {
        $("#xb-field-edit-threeplaymedia_streaming>option[value|=1]").prop('selected', true);
        $(advSettingsContainer).scrollTo(0, 1500);
      } else if (panel.id === 'accordion-panel-transcripts') {
        $("#xb-field-edit-threeplaymedia_streaming>option[value|=0]").prop('selected', true)
      }
    }
  });
  
  function setTooltip(button) {
    var $button = $(button);
    if ($button.hasClass('active')) {
      $button.attr('data-tooltip', gettext(button.innerText + " now enabled"));
    } else {
      $button.attr('data-tooltip', gettext("Click to enable " + button.innerText));
    }
  }
</script>
